<template>
    <Bg />
    <div
      class="w-full h-full grid grid-cols-4 gap-6 items-center justify-center min-h-screen px-8"
      style="height: calc(100vh - 64px); width: 100vw; position: absolute;" 
    >
      <div class="col-span-1 h-full w-full">
        <LeftPanel :data = battleData />
      </div>
      <div class="col-span-3 h-full w-full">
        <RightPanel :data = battleData />
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import Bg from '@/components/UI/bg.vue'
  import LeftPanel from '@/components/LeftContainer.vue'
  import RightPanel from '@/components/RightContainer.vue'
  import request from '@/api/request'
  import { ref, onMounted } from 'vue'
  const battleData = ref({})
  const getBattleData = async () => {
    const res = await request.get('/api/battle')
    battleData.value = res
  }
  onMounted(() => {
    getBattleData();
  })
  </script>
  
  <style scoped>
  .col-span-1, .col-span-3 {
    display: flex;
    flex-direction: column;
    height: 80%;
  }
  </style>
  